<template>
  <div>
    <my-header></my-header>
    <div class="container">
      <div class="top">
        <ul>
          <li>
           <input type="checkbox" @click="quan" v-model="ischeck">全选
          </li>
          <li>
            商品信息
          </li>
          <li>
            单价(元)
          </li>
          <li>
            数量
          </li>
          <li>
            金额(元)
          </li>
          <li>
            操作
          </li>
        </ul>
      </div>
      <div>
        <el-empty description="你的购物车暂无商品" v-if="shop.length==0"></el-empty>
      </div>
      <div class="center" v-for="(item,index) in shop" :key="index">
        <ul>
          <li><input type="checkbox" v-model="checkModel" :value="item.fid"></li>
          <li><img :src="item.img_small" alt=""></li>
          <li>{{item.title}}</li>
          <li>{{item.price}}</li>
          <li><el-input-number v-model="item.numbers" :min="1" :max="99"></el-input-number></li>
          <li>¥{{(item.price*item.numbers).toFixed(2)}}</li>
          <li @click="remove(item.fid)" style="cursor:pointer;
">删除</li>
        </ul>
      </div>
      <div class="bottom">
        <div class="bottom-left">
          <input type="checkbox" v-model="ischeck" @click="quan">
          <span>全选</span>
        </div>
        <div class="bottom-right">
          <div style="margin-right:90px">
            合计(元):<span style="margin-left:10px;color:#8c222c;font-weight:bold;font-size:24px">¥{{total.toFixed(2)}}</span>
          </div>
          <div style="background-color:#8c222c;color:#ffffff;width:80px">去结算</div>
        </div>
      </div>
      </div>
      <my-footer></my-footer>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  data(){
    return{
      ischeck:false,
      shop:[],
      checkModel:[]
    }
  },
  mounted(){
    this.axios.get(`/shopcar?uname=${this.name}`).then(result=>{
      console.log(result.data)
      this.shop=result.data
      console.log(this.shop)
      this.num=result.data.numbers
    })
  },
  methods:{
    remove(p){
      this.axios.post('/remove',`fid=${p}`).then(result=>{
        console.log(result);
        location.reload(true);
      })
    },
    plremove(is){
      this.axios.post('/plremove',`ischeck=${is}`).then(result=>{
        console.log(result);
      })
    },
     quan(){
    this.ischeck=!this.ischeck
        if(this.ischeck==true){
        this.checkModel=this.shop.map((item)=>{
          return item.fid
        })
      }else{
        this.checkModel=[]
      }
      console.log(this.ischeck)
    },
  },
  computed: {
    ...mapState(["name"]),
    total(){
      let total=0
      this.shop.forEach((item)=>{
        if(this.checkModel.indexOf(item.fid)+1){
          total += item.numbers*item.price
        }
      })
      return total
    }
  },
   watch:{
    checkall(){
    },
    checkModel(){
      console.log(this.checkModel)
      if(this.checkModel.length==this.shop.length){
        this.ischeck=true
      }else{
        this.ischeck=false
      }
    }
  }
}
</script>
<style scoped>
.container{
  max-width: 1200px;
  min-width: 1200px;
  margin: auto;
}
.container .top>ul{
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
  border-bottom: 2px solid #9e9d9d;
}
.container .top ul li{
  margin-bottom: 10px;
}
.container .center>ul{
  display: flex;
  justify-content: space-around;
  height: 140px;
  margin-top: 30px;
  background-color: #f9f9f9;
}
.container .center ul li{
  line-height: 140px;
}
.container .center ul li:nth-child(1){
  margin-left: 10px;
  width: 50px;
}
.container .center ul li:nth-child(2){
  margin-left: 30px;
}
.container .center ul li:nth-child(3){
  margin-left: -80px;
  width: 60px;
  overflow: hidden; 
}
.container .center ul li:nth-child(4){
 margin-left: -20px;
}
.container .center ul li:nth-child(5){
  margin-right: -17px;
}
.container .center ul li:nth-child(6){
  margin-right: 50px;
}
.container .center ul li:nth-child(7){
  margin-right: 30px;
}
.container .center ul li img{
  width: 100px;
}
.container .bottom{
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  margin: 30px 0 30px 0;
  background-color: #f9f9f9;
}
.container .bottom .bottom-left{
  margin-left: 77px;
}
.container .bottom .bottom-right{
  display: flex;
}
</style>